<template>
  <div class="blueFoxCase">
    <transition-group name="iconBounce">
      <div class="caseIcon" v-for="(item,index) in iconList" :key="index" @touchend="iconTouch(index,item)">
        <div class="icon" :style="iconStyle(item,index)"></div>
      </div>
    </transition-group>
    <div class="close" @touchend="closeTouch"></div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  computed: {
    //卡牌列表
    iconList() {
      return this.blueFoxCaseIcon.case
    },
    //卡牌样式
    iconStyle(item, index) {
      return function (item, index) {
        const display = index > 1 ? 'none' : 'block'
        return {
          background: "url(" + item.background + ")0 0/100% 100%",
          filter: "grayscale(" + item.gray + ")",
          display: display
        }
      }
    },
    ...mapGetters("blueFoxStatus", {
      blueFoxCaseIcon: "getBlueFoxCaseIcon"
    })
  },
  methods: {
    //点击关闭百宝箱
    closeTouch: function () {
      this.touchMusic()
      this.setBlueFoxCaseShow(false)
    },
    //点击删除百宝箱意向 恢复dock栏意向
    iconTouch: function (index, item) {
      this.clickMusic()
      this.updateDockList({
        position: item.oldIndex,
        arr: item
      })
      this.deleteBlueFoxCase({
        index: index,
        id: this.blueFoxCaseIcon.dockId
      })
    },
    ...mapActions("dockListStatus", ["updateDockList", "deleteBlueFoxCase"]),
    ...mapActions("blueFoxStatus", ["setBlueFoxCaseShow"])
  }
};
</script>

<style scoped lang='stylus'>
.blueFoxCase
  position absolute
  $center('WHL_T', 10rem, 6.2rem, -6.5rem)
  background url($urlTitle + 'blueFox/case.png') 0 0 / 100% 100%
  padding-left 1rem
  box-sizing border-box
  transition all 0.5s
  .caseIcon
    width 3.8rem
    height 3.8rem
    margin-top 2rem
    margin-right 0.55rem
    box-sizing border-box
    border-radius 50%
    float left
    position relative
    .icon
      transition all .5s
      $coord('WHLT', 2.6rem, 2.6rem, 0.6rem, 0.6rem)
  .close
    $coord('WHRT', 1.5rem, 1.5rem, -0.5rem, 0.8rem)
    background url($urlTitle + 'blueFox/caseClose.png') 0 0 / 100% 100%
</style>
